<template>
  <div class="box">
      <header>
          多加网
      </header>
      <main>
          <router-view></router-view>
      </main>
      <footer>
          <span :class="ind===index?'active':''" @click="jump(item.to,index)" v-for="(item,index) in list" :key='index'> {{item.name}} </span>
      </footer>
  </div>
</template>

<script>
export default {
 data(){
     return {
         list:[
             {
                 name:'首页',
                 to:'/main/home'
             },
             {
                 name:'我的',
                 to:'/main/my'
             }
         ],
         ind:0
     }
 },
 methods:{
     jump(to,index){
         this.$router.push(to)
         this.ind=index
     }
 }
}
</script>

<style lang="scss">
.box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header{
        width: 100%;
        height: 40px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        background: #1D1D28;
    }
    main{
        flex: 1;
        overflow-y: auto;
    }
    footer{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        span{
            flex: 1;
            text-align: center;
        }
        .active{
            color: red;
        }
    }
}
</style>